import React, { useState } from 'react'
import Header from '@c/header/Header'
import { useHistory } from 'react-router-dom'


import { Conback, Container } from './StyledName.js'

import Icon from '@a/images/home/iconerr.png'

const Name = (props) => {
    let [state,setState] = useState({
        uname: props.location.state.uname
    })

    let history = useHistory()
    const handleClick = () => {
        history.push('/personalinfo', state)
    }
    const handleChange = (e) => {
        setState({
            uname: e.target.value
        })
    }
    const handleClear = () => {
        setState({
            uname: ''
        })
    }

    return (
        <Conback>
            <Header
                title="修改姓名"
                onChangeClick={handleClick}
            ></Header>
            <Container>
                <span>姓名</span>
                <div>
                    <input type="text" value={state.uname} onChange={handleChange} autoComplete="off" />
                    <img src={`${Icon}`} alt="" onClick={handleClear} />
                </div>
            </Container>
        </Conback>
    )
}

export default Name